<template>
	<view class="tui-userinfo-box">
		<tui-list-cell padding="0" :arrow="true" @click="changeAvatar">
			<view class="tui-list-cell">
				<view>头像</view>
				<image :src="memberinfo.userpic" class="tui-avatar"></image>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" @click="nickname">
			<view class="tui-list-cell">
				<view>昵称</view>
				<view class="tui-content">{{ memberinfo.nickname }}</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" @click="isShowSexModal = true">
			<view class="tui-list-cell">
				<view>性别</view>
				<view class="tui-content">{{ sex }}</view>
			</view>
		</tui-list-cell>
		<!-- <tui-list-cell padding="0" :arrow="true" @click="showKeyboard">
			<view class="tui-list-cell">
				<view>设置支付密码</view>
			</view>
		</tui-list-cell> -->
		<!--<picker mode="date" @change="changeDate">
			<tui-list-cell padding="0" :arrow="true" unlined>
				<view class="tui-list-cell">
					<view>出生日期</view>
					<view class="tui-content">{{date}}</view>
				</view>
			</tui-list-cell>
		</picker>-->
		<tui-keyboard :show="showPwd" :radius="true" :action="true" @close="keyboardClose" @click="keyboardClick">
			<view class="tui-keyboard-tips">{{ keyboardInfo.title }}</view>
			<tui-keyboard-input :inputvalue="showArr" :size="64"></tui-keyboard-input>
		</tui-keyboard>
		<view class="sex-modal" v-show="isShowSexModal">
			<view class="sex-content">
				<view class="sex-title">
					<text>请选择性别</text>
					<view class="close" @click="isShowSexModal = false">x</view>
				</view>
				<view class="sex-list">
					<view :class="['sex-item', sex === '男' ? 'active' : '']" @click="sex = '男'">男</view>
					<view :class="['sex-item', sex === '女' ? 'active' : '']" @click="sex = '女'">女</view>
				</view>
				<view class="sex-btn" @click="changeSex">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sex: '男',
			date: '请选择',
			memberinfo: [],
			showPwd: false,
			pwdArr: ['', '', '', '', '', ''],
			showArr: ['', '', '', '', '', ''],
			pwdTitle: '',
			keyboardInfo: {
				type: 1,
				title: '请输入支付密码'
			},
			keyInputIndex: 0,
			hasPayPwd: 0,
			isShowSexModal: false
		};
	},
	onShow: function() {
		let _this = this;

		_this.$util.getUserInfo(function(userInfo) {
			_this.$request
				.get('member.detail', {
					samkey: new Date().valueOf()
				})
				.then(res => {
					if (res.errno == 0) {
						_this.memberinfo = res.data;
						_this.sex = res.data.sex;
						_this.hasPayPwd = res.data.has_pay_pwd;
						if (_this.hasPayPwd == 1) {
							_this.keyboardInfo.type = 1;
							_this.keyboardInfo.title = '请输入支付密码';
						} else {
							_this.keyboardInfo.type = 2;
							_this.keyboardInfo.title = '请输入新支付密码';
						}
					}
				});
		});
	},
	// onUnload: function() {
	// 	uni.navigateTo({
	// 		url: '/pagesA/my/userInfo/index'
	// 	});
	// },
	methods: {
		async checkPayPwd(payPwd) {
			await this.$request
				.post(
					'member.checkPayPwd',
					{
						pay_pwd: payPwd
					},
					{
						samkey: new Date().valueOf()
					}
				)
				.then(res => {
					if (res.errno == 0) {
						return true;
					} else {
						uni.showModal({
							title: '提示',
							content: res.message,
							showCancel: false
						});
						return false;
					}
				});
		},
		changeAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					const tempFilePaths = res.tempFilePaths[0];
					this.tui.href('/pagesA/my/cropper/cropper?src=' + tempFilePaths);
				}
			});
		},
		nickname() {
			this.tui.href('/pagesA/my/nickname/nickname');
		},
		changeSex() {
			let _this = this
			this.$request
				.post('member.update', {
					sex: _this.sex
				})
				.then(res => {
					if (res.errno == 0) {
						uni.showModal({
							title: '提示',
							content: '修改成功',
							showCancel: false
						});
						_this.isShowSexModal = false
					}
				})
		},
		changeDate(e) {
			console.log(e);
			this.date = e.detail.value;
		},
		showKeyboard() {
			this.showPwd = true;
		},
		keyboardClose() {
			this.pwdArr = ['', '', '', '', '', ''];
			this.showArr = ['', '', '', '', '', ''];
			this.keyInputIndex = 0;
			this.showPwd = false;

			console.log(this.hasPayPwd);
			if (this.hasPayPwd == 1) {
				this.keyboardInfo.type = 1;
				this.keyboardInfo.title = '请输入支付密码';
			} else {
				this.keyboardInfo.type = 2;
				this.keyboardInfo.type.title = '请输入新支付密码';
			}
		},
		keyboardClick(e) {
			let index = e.index + 1;
			if (index == 10) {
				console.log('取消');
				this.keyboardClose();
				return;
			} else if (index == 11) {
				index = 0;
			} else if (index == 12) {
				console.log(this.keyInputIndex);
				if (this.keyInputIndex > 0) {
					this.pwdArr[--this.keyInputIndex] = '';
					// this.keyInputIndex--
					this.showArr = this.getShowArr(this.keyInputIndex - 1);
				}
				console.log(this.pwdArr);
				console.log(this.showArr);
				return;
			}

			this.pwdArr[this.keyInputIndex] = index;
			// this.showArr[this.keyInputIndex] = '·'
			this.showArr = this.getShowArr(this.keyInputIndex);
			this.keyInputIndex++;

			console.log(this.pwdArr);
			console.log(this.showArr);

			if (this.keyInputIndex < 6) {
				return;
			}

			let pwd = this.pwdArr.join('');

			if (this.keyboardInfo.type == 1) {
				if (this.checkPayPwd(pwd)) {
					this.keyboardInfo.type = 2;
					this.keyboardInfo.title = '请输入新支付密码';

					this.pwdArr = ['', '', '', '', '', ''];
					this.showArr = ['', '', '', '', '', ''];
					this.keyInputIndex = 0;
				} else {
					this.pwdArr = ['', '', '', '', '', ''];
					this.showArr = ['', '', '', '', '', ''];
					this.keyInputIndex = 0;
				}
				console.log(this.keyboardInfo);
			} else if (this.keyboardInfo.type == 2) {
				this.keyboardInfo.type = 3;
				this.keyboardInfo.title = '请确认支付密码';

				this.waitOkPwd = pwd;

				this.pwdArr = ['', '', '', '', '', ''];
				this.showArr = ['', '', '', '', '', ''];
				this.keyInputIndex = 0;
				console.log(this.keyboardInfo);
			} else {
				if (this.waitOkPwd != pwd) {
					uni.showModal({
						title: '提示',
						content: '两次密码不一致',
						showCancel: false
					});

					this.pwdArr = ['', '', '', '', '', ''];
					this.showArr = ['', '', '', '', '', ''];
					this.keyInputIndex = 0;
				} else {
					this.$request
						.post('member.update', {
							pay_pwd: pwd
						})
						.then(res => {
							if (res.errno == 0) {
								uni.showModal({
									title: '提示',
									content: '设置成功',
									showCancel: false
								});
								this.hasPayPwd = 1;
								this.keyboardClose();
							} else {
								uni.showModal({
									title: '提示',
									content: '设置失败',
									showCancel: false
								});
								this.keyboardClose();
							}
						});
				}
			}
		},
		getShowArr(index) {
			console.log(index);
			let res = [];
			let i = 0;
			while (i < 6) {
				if (i <= index) {
					res.push('·');
				} else {
					res.push('');
				}
				i++;
			}
			return res;
		}
	}
};
</script>

<style>
.tui-userinfo-box {
	margin: 20rpx 0;
	color: #333;
}

.tui-list-cell {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 60rpx 24rpx 30rpx;
	box-sizing: border-box;
	font-size: 30rpx;
}

.tui-pr30 {
	padding-right: 30rpx;
}

.tui-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	display: block;
}

.tui-content {
	font-size: 26rpx;
	color: #666;
}
.tui-keyboard-tips {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
}
.sex-modal {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	background: rgba(0, 0, 0, 0.5);
}
.sex-content {
	width: 100%;
	background: #fff;
	padding: 40rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}
.sex-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 40rpx;
}
.sex-list .sex-item {
	padding: 20rpx 0;
	border-bottom: 1px solid #eee;
	text-align: center;
}
.sex-list .sex-item.active {
	opacity: 0.6;
}
.sex-btn {
	padding: 20rpx;
	margin-top: 20rpx;
	text-align: center;
	background: #5677fc;
	border-radius: 50rpx;
	color: #fff;
}
</style>
